<template>
  <div class="index">
    <header-a type="index"/>
    <!--
    <div class="header" v-else>
      <div class="i1 container-align mar-center">
        <img class="i11" src="../assets/img/8.png"/>
        <img class="i12" @click="toLogin" src="../assets/img/9.png"/>
      </div>
    </div>
    -->

    <div class="i2 text-center" :style="{backgroundImage: 'url(' + banner + ')'}">
      <div class="i21">智能语音系统</div>
      <div class="i22">intelligent voice system</div>
      <div class="i23">-支持多场景语音识别、语音合成-</div>
      <img class="i24" src="../assets/img/11.png" @click="toVoice"/>
    </div>

    <div class="i3">
      <div class="i31 text-center">样音试听</div>
      <div class="i32 container mar-center">
        <div class="i33" v-for="(i, index) in d" :key="i.id">
          <div class="i34">{{ i.name }}</div>
          <div class="i35">{{ i.des }}</div>
          <div class="container-align">
            <img class="i36" src="../assets/img/13.png" v-if="i.status" @click="replay(index)"/>
            <img class="i36" src="../assets/img/14.png" v-else @click="tapAudio(index)"/>
            <div class="i38">
              <div :style="'width: ' + i.pre + '%'"></div>
            </div>
            <audio controls v-show="false" :ref="'audio' + index" @pause="pause(index)" @ended="ended(index)" @timeupdate="timeupdate($event, index)">
              <source :src="i.url" type="audio/mpeg">
              <!--<source src="horse.ogg" type="audio/ogg">-->
              Your browser does not support this audio format.
            </audio>
          </div>
        </div>
      </div>
    </div>

    <div class="i4">
      <div class="i41 mar-center">

        <div class="i42 container-align" style="margin-bottom: 33px">
          <div class="i43">
            <img class="i44" src="../assets/img/16.png"/>
          </div>
          <div class="i45">

            <div class="i46">语音识别</div>
            <div class="i47">将音频文件转换成文本</div>
            <div class="i48">音频识别服务，商业用户的转写任务可在6小时之内完成识别并返回识别文本，一次性上传大规模数据（半小时内上传超过500小时时长的录音）的除外，有大规模数据转写需求的客户，可与售前专家另行沟通。免费用户的转写任务可在24小时内完成识别并返回识别文本。 如有私有化部署（本地部署软件）需求，及商务问题</div>

          </div>
        </div>

        <div class="i42 container-align">
          <div class="i43">
            <img class="i44" src="../assets/img/16.png"/>
          </div>
          <div class="i45">

            <div class="i46">语音合成</div>
            <div class="i47">将文本转换成自然流畅的语音</div>
            <div class="i48">语音合成服务，通过先进的深度学习技术，将文本转换成自然流畅的语音。目前有多种音色可供选择，并提供调节语速、语调、音量等功能。适用于智能客服、语音交互、文学有声阅读和无障碍播报等场景。
              <br/> 如有私有化部署（本地部署软件）需求，及商务问题</div>

          </div>
        </div>

      </div>
    </div>

    <div class="i5">
      <div class="i52 mar-center">
        <div class="i55 text-center">产品优势</div>
        <div class="container i593">

          <div class="i56">
            <div class="i57 mar-center" style="padding-bottom: 15px">
              <img class="i57" src="../assets/img/19.png"/>
            </div>
            <div class="i58">识别准确率高</div>
            <div class="i59">国内独创的字级LC-BLSTM/DFSMN-CTC建模，相对业界传统CTC方法降低了20%的错误率，大幅提高了语音识别的精度。</div>
          </div>

          <div class="i56">
            <div class="i591 mar-center">
              <img class="i591" src="../assets/img/18.png"/>
            </div>
            <div class="i58">超快的解码速率</div>
            <div class="i59">国内独创的LFR解码技术， 在不损失识别精度的情况下，将解码速率提高了3倍以上，大幅缩短了反馈时间，提升用户体验。</div>
          </div>

          <div class="i56">
            <div class="i592 mar-center" style="padding-bottom: 10px">
              <img class="i592" src="../assets/img/17.png"/>
            </div>
            <div class="i58">广泛的领域覆盖</div>
            <div class="i59">业务场景包括智能问答、智能质检、庭审记录、字幕翻译、语音助手等等。在金融、保险、司法、智能家居等多个领域均有成熟的应用案例。</div>
          </div>

        </div>
      </div>
      <img class="i53" src="../assets/img/20.png"/>
      <img class="i54" src="../assets/img/21.png"/>
    </div>
    <Cooperative/>
    <Bottom/>
  </div>
</template>

<script>
import Cooperative from "@/components/Cooperative";
import Bottom from "@/components/Bottom";
import HeaderA from "@/components/child/Header";

export default {
  name: "Index",
  components: { Cooperative, Bottom, HeaderA },
  data () {
    return {
      // isLogin: true,
      banner: '',
      d: [
        /*{id: 1, name: '小A机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false},
        {id: 2, name: '小B机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false},
        {id: 3, name: '小C机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false},
        {id: 4, name: '小D机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false},
        {id: 5, name: '小E机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false},
        {id: 6, name: '小F机器人', des: '目前部分地区客户使用浙江省农村信用社联合社银行卡支付时，可能会出现未到账的情况。', pre: 0, status: false}*/
      ]
    }
  },
  mounted () {
    this.findHomeList();
  },
  methods: {
    toVoice () {
      this.$router.push('/word-to-voice')
    },
    async findHomeList () {
      // let res = await this.$http.post('findHomeList', );
      // console.log(res);
      // const m = res.data.data;
      const m = this.$root.index;
      this.banner = m.bannerList[0];
      this.d = m.audioList.map((v, index) => {
        return {
          id: index,
          name: v.title,
          url: v.url,
          des: v.desc,
          pre: 0,
          status: false
        }
      })

    },
    toLogin () {
      // this.$router.push('/login')
    },
    tapAudio (e) {
      this.$refs['audio' + e][0].play();
      this.$set(this.d[e], 'status', true)
    },
    timeupdate (e, index) {
      const audio = e.target;
      const pre = parseInt(audio.currentTime / audio.duration * 100);
      // console.log(pre)
      this.$set(this.d[index], 'pre', pre)
    },
    pause (index) {
      this.$set(this.d[index], 'status', false)
    },
    replay (e) {
      this.$refs['audio' + e][0].pause();
    },
    ended (e) {
      this.$set(this.d[e], 'pre', 0)
    }
  }
}
</script>

<style scoped lang="scss">
.index {
  .i5{
    background-color: #F2F2F5;
    padding-top: 96px;
    padding-bottom: 99px;
    position: relative;
    overflow: hidden;
    height: 481px;
    margin-bottom: 127px;
    .i593{
      justify-content: space-between;
    }
    .i592{
      width: 67px;
      height: 77px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .i591{
      width: 55px;
      height: 77px;
    }
    .i56{
      width: 297px;
      z-index: 999;
    }
    .i59{
      font-size: 14px;
      font-weight: 300;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.8);
      margin-top: 19px;
    }
    .i58{
      font-size: 20px;
      line-height: 28px;
      color: #000000;
      margin-top: 25px;
    }
    .i57{
      width: 66px;
      height: 77px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .i55{
      font-size: 30px;
      line-height: 42px;
      color: #000000;
      margin-bottom: 34px;
    }
    .i53{
      height: 208px;
      width: 1988px;
    }
    .i54{
      height: 214px;
      width: 2151px;
    }
    .i53,.i54{
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .i52{
      width: 1062px;
    }
  }
  .i4{
    padding-top: 96px;
    padding-bottom: 96px;
    .i42{
      justify-content: space-between;
    }
    .i46{
      font-size: 30px;
      line-height: 42px;
      color: #000000;
      margin-bottom: 8px;
    }
    .i45{
      width: 624px;
    }
    .i47{
      font-size: 14px;
      line-height: 20px;
      color: #000000;
      margin-bottom: 24px;
    }
    .i48{
      font-size: 14px;
      line-height: 20px;
      color: #000000;
    }
    .i41{
      width: 1200px;
      .i43{
        height: 248px;
        width: 537px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .i3{
    padding-top: 96px;
    padding-bottom: 100px;
    background-color: #F2F2F5;
    .i32{
      width: 1200px;
      justify-content: space-between;
      flex-wrap: wrap;
      .i33{
        width: 360px;
        height: 160px;
        background-image: url("../assets/img/12.png");
        margin-top: 30px;
        padding: 15px 23px 0 24px;
        .i35{
          font-size: 14px;
          line-height: 20px;
          color: #FFFFFF;
          margin-top: 14px;
          margin-bottom: 14px;
        }
        .i36{
          height: 32px;
          width: 32px;
          cursor: pointer;
        }
        .i38{
          height: 8px;
          width: 178px;
          border-radius: 4px;
          background-color: #99E4E2;
          margin-left: 11px;
          >div{
            height: 100%;
            border-radius: 4px;
            background-color: #1cb49a;
          }
        }
        .i34{
          font-size: 16px;
          line-height: 22px;
          color: #FFFFFF;
        }
      }
    }
    .i31{
      font-size: 30px;
      line-height: 42px;
      color: #000000;
    }
  }
  /* .header {
    height: 62px;
    background-color: #26C6AB;
    .i1{
      width: 1200px;
      justify-content: space-between;
      .i11{
        width: 270px;
        height: 62px;
      }
      .i12{
        width: 73px;
        height: 31px;
        cursor: pointer;
      }
    }
  } */
  .i2{
    height: 600px;
    // background-image: url("../assets/img/10.png");
    .i21{
      padding-top: 181px;
      font-size: 60px;
      line-height: 84px;
      color: #FFFFFF;
      letter-spacing: 2px;
    }
    .i22{
      font-size: 20px;
      line-height: 28px;
      color: #FFFFFF;
      letter-spacing: 8px;
    }
    .i23{
      font-size: 16px;
      line-height: 22px;
      color: #FFFFFF;
      letter-spacing: 2px;
      margin-top: 12px;
    }
    .i24{
      width: 188px;
      height: 67px;
      margin-top: 46px;
      cursor: pointer;
    }
  }

}
</style>